<template>
  <a-spin :spinning="loading" tip="保存中...">
    <a-form :form="form">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"
                       label="文章标题">
            <a-input
              v-decorator="['title',{initialValue:article.title, rules: [{ required: true, message: '文章标题必填，且不能超过100长度' ,max:100}]}]"
              placeholder="请输入文章标题"
              autocomplete="off"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"
                       label="文章分类">
            <a-select
              showSearch
              v-decorator="['categoryId',{initialValue:article.categoryId, rules: [{ required: true, message: '文章分类必选'}]}]"
              placeholder="请选择分类"
              optionFilterProp="children"
              style="width: 100%"
              :allowClear="true">
              <a-select-option v-for="item in categoryList" :value="item.id" v-bind:key="item.id">{{
                  item.categoryName
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"
                       label="登陆限制">
            <a-radio-group name="protectGroup"
                           v-decorator="['protect',{initialValue:article.protect}]"
            >
              <a-radio :value="true">
                是
              </a-radio>
              <a-radio :value="false">
                否
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"
                       label="文章内容">
            <div id="content" v-decorator="['content',{rules:[{required:true,message:'文章内容必填'}]}]">
              <custom-mavon-editor :content="article.content" @change="contentChangeHandle"></custom-mavon-editor>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :label-col="{span:4}" :wrapper-col="{span:8,offset:4}">
            <a-button type="primary" @click="handleSubmit">
              <a-icon type="save"/>
              保存
            </a-button>
            <router-link to="/article">
              <a-button type="default">
                <a-icon type="undo"/>
                返回
              </a-button>
            </router-link>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script>
import CustomMavonEditor from "@/components/markdown/CustomMavonEditor";
import {findAll} from "@/network/category";
import {saveOrUpdate, findById} from "@/network/article";

const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 22}
};
export default {
  name: "ArticleEdit",
  components: {CustomMavonEditor},
  data() {
    return {
      loading: false,
      formItemLayout,
      categoryList: [],
      article: {
        title: null,
        protect: false,
        content: null
      }
    }
  },
  created() {
    this.loading = true;
    findAll()
      .then(response => {
        this.categoryList = response.data;
        let id = this.$route.params.id;
        if (id) {
          findById(id).then(response => {
            this.article = response.data;
          })
        }
      }).finally(() => this.loading = false);
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  methods: {
    contentChangeHandle(value, render) {
      let isEmpty = value == null || value === '';
      this.form.setFieldsValue({
        'content': isEmpty ? null : value
      })
      if (isEmpty) {
        this.form.validateFields(['content'], (errors, values) => {
        })
      }
    },
    handleSubmit() {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          this.loading = true;
          saveOrUpdate(Object.assign(this.article, values))
            .then(response => {
              this.$message.success(response.message);
              this.$router.replace("/article");
            }).finally(() => this.loading = false);
        }
      });
    }
  }
}
</script>
